<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setTimeout模拟分片渲染</title>
</head>
<body>
<ul id="list"></ul>
<script>
    // 将dom 渲染放在队列中，不影响主线程的执行
    const start = Date.now();
    const listDom = document.getElementById('list');
    let page = 1;
    const total = 10000;
    const pageSize = 10;

    function render(start, end) {
        if (start >= total) return;
        setTimeout(() => {
            for (let i = start; i < end; i++) {
                const li = document.createElement('li');
                li.innerText = '我是第' + i + '数据';
                listDom.appendChild(li);
            }
            page++
            render((page - 1) * pageSize, page * pageSize)
        }, 0)
    }
    render((page - 1) * pageSize, page * pageSize)
    console.log(Date.now() - start);
</script>
</body>
</html>
